<template>
  <div class="resource">
    <div class="lodding" v-if="load">
      <Load />
    </div>
    <div class="container" v-else>
      <!-- 顶部搜索区域 -->
      <div class="top-content">
        <!-- 导航条 -->
        <div class="tab">
          <el-tabs
            v-model="activeCategoryId"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="综合搜索" name="0"></el-tab-pane>
            <el-tab-pane
              v-for="item in resourceCategory"
              :key="item.id"
              :label="item.category"
              :name="item.id"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 搜索框 -->
        <div class="search">
          <div class="InputContainer">
            <input
              type="text"
              name="text"
              class="input"
              id="input"
              placeholder="Search"
              :disabled="!isShow"
              v-model="resourceName"
              @keyup.enter="query"
            />

            <label
              for="input"
              class="labelforsearch"
              @click="query"
              style="cursor: pointer"
            >
              <svg viewBox="0 0 512 512" class="searchIcon">
                <path
                  d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
                ></path>
              </svg>
            </label>
            <div class="border"></div>

            <button class="micButton">
              <svg viewBox="0 0 384 512" class="micIcon">
                <path
                  d="M192 0C139 0 96 43 96 96V256c0 53 43 96 96 96s96-43 96-96V96c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 89.1 66.2 162.7 152 174.4V464H120c-13.3 0-24 10.7-24 24s10.7 24 24 24h72 72c13.3 0 24-10.7 24-24s-10.7-24-24-24H216V430.4c85.8-11.7 152-85.3 152-174.4V216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 70.7-57.3 128-128 128s-128-57.3-128-128V216z"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <!-- 选项卡 -->
      <div class="top-tabs">
        <div class="tabs">
          <input type="radio" id="radio-1" name="tabs" checked="" />
          <label class="tab" for="radio-1" @click="getSoftResource(1)"
            >软件资源</label
          >
          <input type="radio" id="radio-2" name="tabs" />
          <label class="tab" for="radio-2" @click="getWebSiteResource(2)"
            >网站资源</label
          >
          <input type="radio" id="radio-3" name="tabs" />
          <span class="glider"></span>
        </div>
      </div>
      <!-- 内容区域 -->
      <div class="wrapper">
        <Software
          v-if="isShow"
          :resourceSoftWareDada="resourceSoftWareDada"
          :isLoad="isLoad"
          :isEmpty="isEmpty"
        />
        <WebSite v-else :resourceWebSiteData="resourceWebSiteData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Software from "./Software.vue";
import WebSite from "./WebSite.vue";
import {
  reqQueryByType,
  reqResourceType,
  reqResourceCategory,
  reqQueryByCategory,
} from "@/api/resource/index";
import { ElMessage } from "element-plus";
import Load from "@/components/Load.vue";
// 加载动画
const load = ref(true);

// 软件资源模块搜索时的的加载动画
const isLoad = ref(false);

// 软件资源模块是否展示空状态
const isEmpty = ref(false);

// 用于记录用户搜索时选择了那个选型
let activeCategoryId = ref("0");
// 用户搜索的值
let resourceName = ref("");
// 控制资源区域展示软件资源还是网站资源
let isShow = ref(true); // true 软件资源 false 网站资源

// 资源类型
const resourceType = ref([]);
// 资源分类
const resourceCategory = ref([]);
// 软件资源数据
const resourceSoftWareDada = ref([]);
// 网站资源数据
const resourceWebSiteData = ref([]);

// 页面初始化
onMounted(() => {
  getResourceType(); // 获取资源类型
});

// 获取资源类型
const getResourceType = () => {
  reqResourceType().then((res) => {
    resourceType.value = res.data;
    getResourceCategory(res.data[0].id); // 获取资源分类
    getSoftResource(res.data[0].id); // 初始化软件资源
  });
};

// 获取资源分类
const getResourceCategory = (typeId) => {
  reqResourceCategory(typeId).then((res) => {
    resourceCategory.value = res.data;
  });
};

// 模糊搜索 根据资源类型
const getInfoByType = (entity) => {
  isLoad.value = true;
  reqQueryByType(entity).then((res) => {
    if (res.code == 200) {
      if (res.data != null && res.data.length > 0) {
        if (entity.id != 2) {
          resourceSoftWareDada.value = res.data;
          isEmpty.value = false;
        } else {
          resourceWebSiteData.value = res.data;
        }
      } else {
        ElMessage.warning("暂无相关数据");
        isEmpty.value = true;
      }
    } else {
      ElMessage.error(res.data);
    }
    isLoad.value = false;
    load.value = false;
  });
};

// 模糊搜索 根据资源分类
const getInfoByCategory = (entity) => {
  isLoad.value = true;
  reqQueryByCategory(entity).then((res) => {
    if (res.code == 200) {
      if (res.data != null && res.data.result.length > 0) {
        resourceSoftWareDada.value = res.data.result;
        isEmpty.value = false;
      } else {
        ElMessage.warning("暂无相关数据");
        isEmpty.value = true;
      }
    } else {
      ElMessage.error(res.data);
    }
    isLoad.value = false;
  });
};

// 获取软件资源
const getSoftResource = (typeId, resourceName) => {
  const entity = {
    id: typeId,
    resourceName,
    isRecommend: 1,
    status: 1,
  };

  getInfoByType(entity);

  isShow.value = true;
};

// 获取网站资源
const getWebSiteResource = (typeId) => {
  const entity = {
    id: typeId,
    status: 1,
  };

  getInfoByType(entity);

  isShow.value = false;
};

// 搜索框的选项栏发生改变时触发当前函数
const handleClick = (tab, event) => {
  // console.log(tab.props.name);
  // 保存categoryId 用于搜索
  activeCategoryId.value = tab.props.name;
};

// 搜索
const query = () => {
  const entity = {
    id: 1,
    resourceName: resourceName.value,
    status: 1,
  };

  if (activeCategoryId.value == 0) {
    // 类型模糊搜索  暂时只做软件资源模块的模糊搜索
    getInfoByType(entity);
    resourceName.value = "";
  } else {
    // 分类的模糊搜索
    entity.id = activeCategoryId.value;
    getInfoByCategory(entity);
    resourceName.value = "";
  }
};
</script>

<style scoped lang="scss">
.lodding {
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
}
.resource {
  width: 80%;
  height: 100%;
  min-height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
  margin: 0 auto;
  .container {
    width: 100%;
    height: auto;
    border-radius: 10px;
    .top-content {
      width: 100%;
      height: 130px;
      .search {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .InputContainer {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgb(255, 255, 255);
          border-radius: 10px;
          overflow: hidden;
          cursor: pointer;
          padding-left: 15px;
          box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
        }

        .input {
          width: 800px;
          height: 100%;
          border: none;
          outline: none;
          font-size: 0.9em;
          caret-color: rgb(255, 81, 0);
        }

        .labelforsearch {
          cursor: text;
          padding: 0px 12px;
        }

        .searchIcon {
          width: 13px;
        }

        .border {
          height: 40%;
          width: 1.3px;
          background-color: rgb(181, 181, 181);
        }

        .micIcon {
          width: 12px;
        }

        .micButton {
          padding: 0px 15px 0px 12px;
          border: none;
          background-color: transparent;
          height: 40px;
          cursor: pointer;
          transition-duration: 0.3s;
        }

        .searchIcon path {
          fill: rgb(114, 114, 114);
        }

        .micIcon path {
          fill: rgb(255, 81, 0);
        }

        .micButton:hover {
          background-color: rgb(255, 230, 230);
          transition-duration: 0.3s;
        }
      }
      .tab {
        width: 880px;
        margin: 0 auto;
        .demo-tabs > .el-tabs__content {
          padding: 32px;
          color: #6b778c;
          font-size: 32px;
          font-weight: 600;
        }
      }
    }
    .top-tabs {
      width: 100%;
      height: 50px;
      display: flex;
      margin-bottom: 10px;
      .tabs {
        display: flex;
        position: relative;
        background-color: #fff;
        box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15),
          0 6px 12px 0 rgba(24, 94, 224, 0.15);
        padding: 0.75rem 1.5em;
        border-radius: 99px;
      }

      .tabs * {
        z-index: 2;
      }

      input[type="radio"] {
        display: none;
      }

      .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        width: 80px;
        font-size: 0.8rem;
        color: black;
        font-weight: 500;
        border-radius: 99px;
        cursor: pointer;
        transition: color 0.15s ease-in;
      }

      input[type="radio"]:checked + label {
        color: #185ee0;
      }

      input[type="radio"]:checked + label > .notification {
        background-color: #185ee0;
        color: #fff;
        margin: 0px;
      }

      input[id="radio-1"]:checked ~ .glider {
        transform: translateX(0);
      }

      input[id="radio-2"]:checked ~ .glider {
        transform: translateX(100%);
      }

      .glider {
        position: absolute;
        display: flex;
        height: 30px;
        width: 80px;
        background-color: #e6eef9;
        z-index: 1;
        border-radius: 99px;
        transition: 0.25s ease-out;
      }

      @media (max-width: 700px) {
        .tabs {
          transform: scale(0.6);
        }
      }
    }
    .wrapper {
      width: 100%;
      height: auto;
      background-color: #ffffff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      ::-webkit-scrollbar {
        width: 12px; /* 竖向滚动条宽度 */
        height: 13px; /* 横向滚动条宽度 */
      }
    }
  }
}
</style>